<template>
    <div class="payIndex">
        <!-- 头部 -->
        <div class="payIndex-top">
            <div class="title-left">计费管理 / 缴费类性管理</div>
            <div class="input-left">
                <el-input v-model="input" placeholder="项目价格" size="medium"
                    style="width: 235px; margin-right: 10px"></el-input>
                <el-select v-model="value" placeholder="通知状态" size="medium">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <div class="dainfei">{{ namechange }}</div>
                <div class="btn-box">
                    <el-button type="primary" size="small" style="font-size: 14px" icon="el-icon-search"
                        @click="inquire">查询</el-button>
                    <el-button type="success" size="small" style="font-size: 14px" icon="el-icon-plus"
                        @click="add">新增</el-button>
                    <el-button type="primary" size="small" style="font-size: 14px" icon="el-icon-refresh">刷新</el-button>
                    <el-button type="primary" size="small" style="font-size: 14px" icon="el-icon-upload2"
                        @click="exportSelected">导出</el-button>
                </div>
            </div>
        </div>
        <!-- 底部内容 -->
        <div class="payIndex-bottom">
            <div class="payIndex-bottom-left">
                <!-- 树状图 -->
                <el-tree :default-expand-all="true" :data="data" :props="defaultProps"
                    @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="payIndex-bottom-right">
                <template>
                    <el-table :data="tableData" border style="width: 100%" max-height="448" v-loading="loading">
                        <el-table-column prop="payname" label="缴费项目名称" width="115" align="center">
                        </el-table-column>
                        <el-table-column prop="paylevel" label="缴费项目优先级" width="115" align="center">
                        </el-table-column>
                        <el-table-column prop="paynum" label="项目用量/时长" width="110" align="center"></el-table-column>
                        <el-table-column prop="paymoney" label="项目价格" width="105" sortable
                            align="center"></el-table-column>
                        <el-table-column prop="paytime" label="创建时间" width="110" sortable
                            align="center"></el-table-column>
                        <el-table-column prop="username" label="通知人" width="100" align="center"></el-table-column>
                        <el-table-column prop="paystatus" label="状态" width="100" align="center"></el-table-column>
                        <el-table-column prop="address" label="操作" width="210" align="center">
                            <template slot-scope="scope">
                                <div style="display: flex">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                        style="margin-right: 10px">通知</el-button>
                                    <!--  -->
                                    <el-button size="mini" style="color: #62a8ea"
                                        @click="examine(scope.$index, scope.row)">查看</el-button>
                                    <el-button size="mini" style="border: 0.5px solid #fbc4c4"
                                        @click="handleDelete(scope.$index, scope.row)">作废</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!-- 分页 -->
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[9, 10, 20, 50]" :page-size="this.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="this.total" background>
                    </el-pagination>
                </div>
                <!--  -->
                <!-- Table -->
                <el-dialog title="计费通知" :visible.sync="dialogTableVisible">
                    <el-input v-model="inputjifei" placeholder="请输入内容" size="medium"
                        style="width: 235px; margin-right: 10px"></el-input>
                    <!-- 搜索 -->
                    <el-button type="primary" icon="el-icon-search" @click="unit"></el-button>
                    <el-button type="warning" icon="el-icon-refresh">重置</el-button>
                    <!-- 表单 -->
                    <el-table :data="gridData" border highlight-current-row @current-change="handleCurrentChange">
                        <el-table-column type="index" label="序号" width="80" align="center">
                        </el-table-column>
                        <el-table-column property="username" label="用户账号" width="150" align="center"></el-table-column>
                        <el-table-column property="homeaddress" label="家庭住址" width="200"
                            align="center"></el-table-column>
                        <el-table-column property="type" label="类型" align="center"></el-table-column>
                        <el-table-column property="coststatus" label="缴费状态" align="center"></el-table-column>
                    </el-table>
                    <div class="block" style="display: flex; justify-content: center">
                        <el-pagination @size-change="SizeChange1" @current-change="CurrentChange2"
                            :current-page="currentPage" :page-sizes="[7, 10, 20, 30]" :page-size="pageSize1"
                            layout="total, sizes, prev, pager, next, jumper" :total="total1">
                        </el-pagination>
                        <div>
                            <el-button type="primary" @click="goBick">取消</el-button>
                            <el-button type="primary" @click="queren">通知</el-button>
                        </div>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            loading: true,
            input: "", // 项目价格
            inputjifei: "", // 计费搜索框
            value: "", // 通知状态
            namechange: "电费目录", // 变量名
            options: [
                {
                    value: "1",
                    label: "已通知",
                },
                {
                    value: "选项2",
                    label: "未通知",
                },
            ],
            // 树状图
            data: [
                {
                    c_id: 1,
                    label: "缴费项目",
                    children: [
                        {
                            c_id: 2,
                            label: "电费项目",
                            children: [
                                {
                                    c_id: 7,
                                    label: "电费目录表",
                                },
                            ],
                        },
                        {
                            c_id: 3,
                            label: "水费项目",
                            children: [
                                {
                                    c_id: 8,
                                    label: "水费固定月目录表",
                                },
                                {
                                    c_id: 9,
                                    label: "水费按量计价目录表",
                                },
                            ],
                        },
                        {
                            c_id: 4,
                            label: "天然气项目",
                            children: [
                                {
                                    c_id: 10,
                                    label: "天然气目录表",
                                },
                            ],
                        },
                        {
                            c_id: 5,
                            label: "物业费项目",
                            children: [
                                {
                                    c_id: 11,
                                    label: "物业费目录表",
                                },
                            ],
                        },
                        {
                            c_id: 6,
                            label: "宽带项目",
                            children: [
                                {
                                    c_id: 12,
                                    label: "宽带目录表",
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
            c_id: 7,
            // 表单
            tableData: [],
            // 分页
            currentPage4: 1,
            currentPage: 1, // 模态框分页
            total: 0,
            total1: 10,
            pageSize: 9,
            pageSize1: 7,
            num: 0,
            num1: 0,
            // 模态框 表单
            gridData: [],
            dialogTableVisible: false,
            id: "",
            // 开关
            aaa: false,
            //token
            token: localStorage.getItem("token"),
            // 模态框选择
            currentRow: null,
        };
    },
    methods: {
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            if (this.aaa == true) {
                this.inquire();
            } else {
                this.initialize();
            }
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.num = val - 1;
            if (this.aaa == true) {
                this.inquire();
            } else if (this.aaa == false) {
                this.initialize();
            }
        },
        // 模态框分页
        SizeChange1(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize1 = val;
            this.handleEdit();
        },
        CurrentChange2(val) {
            console.log(`当前页: ${val}`);
            this.num1 = val - 1;
            this.handleEdit();
        },
        // 外部查看
        inquire() {
            this.$axios({
                url: "/cost/getCostData",
                method: "GET",
                params: {
                    c_id: this.c_id,
                    paymoney: this.input,
                    paystatus: this.value,
                    currPage: this.num,
                    pageNum: this.pageSize,
                },
            }).then((res) => {
                console.log(res);
                this.aaa = true;
                this.total = res.data.total;
                this.tableData = res.data.data;
            });
        },
        // 刷新
        // 电费
        handleNodeClick(data) {
            console.log(data);
            this.$axios({
                url: "/cost/getCostData",
                method: "GET",
                params: {
                    c_id: data.c_id,
                    paymoney: "",
                    paystatus: "",
                    currPage: this.num,
                    pageNum: this.pageSize,
                },
            }).then((res) => {
                console.log(res);
                // this.aaa = false; // 开关
                this.tableData = res.data.data;
                this.c_id = data.c_id;
                this.total = res.data.total;
                this.namechange = data.label;
                for (let a = 0; a < this.tableData.length; a++) {
                    const data = moment(this.tableData[a].paytime).format("YYYY-MM-DD ");
                    this.tableData[a].paytime = data;
                    // 通知
                    if (this.tableData[a].paystatus == 1) {
                        this.tableData[a].paystatus = "已通知";
                    } else if (this.tableData[a].paystatus != 1) {
                        this.tableData[a].paystatus = "未通知";
                    }
                    // 通知人
                    if (this.tableData[a].username == undefined) {
                        this.tableData[a].username = "暂无";
                    }
                }
            });
        },
        // 初始话
        initialize() {
            this.$axios({
                url: "/cost/getCostData",
                method: "GET",
                params: {
                    c_id: this.c_id,
                    paymoney: "",
                    paystatus: "",
                    currPage: this.num,
                    pageNum: this.pageSize,
                },
            }).then((res) => {
                console.log(res);
                setTimeout(() => {
                    this.loading = false;
                }, 500);
                this.tableData = res.data.data;
                this.total = res.data.total;
                for (let a = 0; a < this.tableData.length; a++) {
                    const data = moment(this.tableData[a].paytime).format("YYYY-MM-DD ");
                    this.tableData[a].paytime = data;
                    // 通知
                    if (this.tableData[a].paystatus == 1) {
                        this.tableData[a].paystatus = "已通知";
                    } else if (this.tableData[a].paystatus == 2) {
                        this.tableData[a].paystatus = "未通知";
                    }
                    // 通知人
                    if (this.tableData[a].username == undefined) {
                        this.tableData[a].username = "暂无";
                    }
                }
            });
        },
        // 跳转添加页面
        add() {
            this.$router.push({
                path: "/pay/add",
            });
        },
        // 导出

        // 导出选中的数据
        exportSelected() {
            // 调用导出方法
            this.exportToExcel(this.tableData);
        },
        // 导出为 Excel
        exportToExcel(data) {
            // 使用第三方库（如 xlsx）导出数据
            import("xlsx").then((XLSX) => {
                const worksheet = XLSX.utils.json_to_sheet(data);
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
                XLSX.writeFile(workbook, "导出数据.xlsx");
            });
        },
        // 通知
        handleEdit(index, row) {
            this.dialogTableVisible = true;
            console.log(index, row);
            this.$axios({
                url: "/users/getUserList",
                method: "GET",
                params: {
                    username: this.inputjifei,
                    currPage: this.num1, // 分页器
                    pageNum: this.pageSize1,
                },
            }).then((res) => {
                console.log(res);
                this.id = row.id;
                this.gridData = res.data.data;
                this.total1 = res.data.total;
                for (let a = 0; a < this.gridData.length; a++) {
                    // 类型
                    if (this.gridData[a].type == 1) {
                        this.gridData[a].type = "管理员";
                    } else if (this.gridData[a].type == 2) {
                        this.gridData[a].type = "普通用户";
                    }
                    // 缴费状态
                    if (this.gridData[a].coststatus == 1) {
                        this.gridData[a].coststatus = "已缴费";
                    } else if (this.gridData[a].coststatus == 2) {
                        this.gridData[a].coststatus = "未缴费";
                    }
                }
            });
        },
        // 查看
        examine(index, row) {
            console.log(index, row);
            this.$router.push({
                path: "/pay/edit",
                query: {
                    id: row.id,
                },
            });
        },
        // 作废
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm("确定永久作废这条计费项目？, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    url: "/cost/delCostData",
                    method: "GET",
                    params: {
                        id: row.id,
                        token: this.token,
                    },
                }).then((res) => {
                    console.log(res);
                    this.handleNodeClick();
                });
            });
        },
        // 序号

        // 模态框搜索
        unit() {
            this.$axios({
                url: "/users/getUserList",
                method: "GET",
                params: {
                    username: this.inputjifei,
                    currPage: this.num1,
                    pageNum: this.pageSize1,
                },
            }).then((res) => {
                console.log(res);
                this.gridData = res.data.data;
                this.total1 = res.data.total;
                for (let a = 0; a < this.gridData.length; a++) {
                    // 类型
                    if (this.gridData[a].type == 1) {
                        this.gridData[a].type = "管理员";
                    } else if (this.gridData[a].type == 2) {
                        this.gridData[a].type = "普通用户";
                    }
                    // 缴费状态
                    if (this.gridData[a].coststatus == 1) {
                        this.gridData[a].coststatus = "已缴费";
                    } else if (this.gridData[a].coststatus == 2) {
                        this.gridData[a].coststatus = "未缴费";
                    }
                }
            });
        },
        // 模态框 取消
        goBick() {
            this.dialogTableVisible = false;
        },
        // 模态框 通知
        queren() {
            // if (this.currentRow.coststatus == "已缴费") {
            //   this.currentRow.coststatus = 1;
            // } else {
            //   this.currentRow.coststatus = 2;
            // }
            this.$confirm("确定通知改用用户缴费？, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    url: "/cost/updateCostData",
                    method: "POST",
                    data: {
                        u_id: this.currentRow.id,
                        c_id: this.id,
                        coststatus: 2,
                        paystatus: this.currentRow.parkstatus,
                        username: this.currentRow.username,
                        token: sessionStorage.getItem("token"),
                    },
                }).then((res) => {
                    console.log(res);
                    this.dialogTableVisible = false;
                    this.$message({
                        type: "success",
                        message: "通知成功!",
                    });
                });
            });
        },
        // 模态框 点击
        handleCurrentChange(val) {
            this.currentRow = val;
            console.log(this.currentRow, 1111);
        },
    },
    created() {
        this.initialize();
    },
};
</script>

<style scoped>
.title-left {
    /* font-size: 18px; */
    font-weight: 600;
    color: #000;
    margin-top: 16px;
    margin-left: 16px;
    display: inline-block;
}

.input-left {
    display: flex;
    margin-top: 16px;
}

.dainfei {
    font-size: 24px;
    font-weight: 700;
    margin-left: 55px;
    width: 224px;
}

.btn-box {
    margin-left: 378px;
}

.payIndex-bottom {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.payIndex-bottom-left {
    width: 500px;
}

.block {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
</style>